<template>
  <div>
    <div class="head">
      <van-nav-bar
        title="我的收藏"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>

    <div class="sc" v-if="alllist.length>0">
      <h2>收藏</h2>
      <div v-for="(l, i) in alllist" :Key="i" class="bigbox">
        <div class="left" @click="godetail(l.rid, l.albumId, l.dataReport)">
          <img :src="l.albumPic" alt="" />
          <div class="play">
            <van-icon name="play-circle" size="30px" color="#fff" />
          </div>
        </div>
        <div class="middle" @click="godetail(l.rid, l.albumId, l.dataReport)">
          <h3 class="van-ellipsis">{{ l.audioDes }}</h3>
          <p class="van-ellipsis">{{ l.albumName }}</p>
        </div>
        <!-- <div class="right">
          <van-button type="danger" color=" rgb(249, 78, 78)"
            >取消收藏</van-button
          >
        </div> -->
      </div>
    </div>
    <van-empty v-else description="您还没有收藏的FM单" />
  </div>
</template>

<script>
import { Slider } from "vant";
export default {
  data() {
    return {
      sclist: [],
      alllist: [],
      flag: true,
      kid: 0,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    godetail(value, value2, value3) {
      console.log(value, value2);
      this.$router.push({
        name: "detail",
        query: { id: value, albumid: value2, dataReport: value3 },
      });
    },
  },
  mounted() {
    this.$ajax
      .Fmfindall({
        username: localStorage.getItem("username"),
      })
      .then((res) => {
        this.sclist = res.data;
        // console.log(this.sclist)
        if (this.sclist.length > 0) {
          for (let i = 0; i < this.sclist.length; i++) {
            if (this.sclist[i].albumid > 0) {
              this.$ajax
                .getjiemu({
                  //详情list  通过albumid查询
                  installid: "0004de6o",
                  appid: "0",
                  operator: "2",
                  playid: "BE8C16124A0D4564A2D647D1F6B861F3",
                  suppermode: "0",
                  devicetype: "1",
                  devicename: "Unknown iPhone",
                  lon: "114.422956",
                  channel: "appstore",
                  action: "466",
                  pagesize: "10",
                  sorttype: "1",
                  resolution: "750*1624",
                  pagenum: "1",
                  version: "5.3.4",
                  udid: "1dd9a71d07d7445b22a52fc5e3191fd1",
                  usertype: 0,
                  sign: "1b881e03776150f8f1d54e594cc8f6a0",
                  id: this.sclist[i].albumid,
                  mac: "020000000000",
                  timestamp: "1609985172",
                  sessionid: "4853CDC28AAF4136ACFD9F98A86FD6E5",
                  timezone: "28800",
                  network: 1,
                  osversion: "14.0.1",
                  lat: "30.460359",
                  idfv: "01D797A6-80F3-4C9F-8183-9FB3F11DCC9E",
                  page: "200003",
                  producer: "apple",
                  screensize: "375*812",
                  idfa: "0E03CA4F-EC5F-4E29-9DAC-26D332D07B91",
                })
                .then((res) => {
                  if (res.result != null) {
                    this.$nextTick(() => {
                      this.alllist.push(res.result.dataList[0]);
                    });
                  }
                });
            } else {
              this.$ajax
                .getjiemu({
                  //详情list  通过id查询
                  installid: "0004de6o",
                  appid: "0",
                  operator: "2",
                  playid: "BE8C16124A0D4564A2D647D1F6B861F3",
                  suppermode: "0",
                  devicetype: "1",
                  devicename: "Unknown iPhone",
                  lon: "114.422956",
                  channel: "appstore",
                  action: "466",
                  pagesize: "10",
                  sorttype: "1",
                  resolution: "750*1624",
                  pagenum: "1",
                  version: "5.3.4",
                  udid: "1dd9a71d07d7445b22a52fc5e3191fd1",
                  usertype: 0,
                  sign: "1b881e03776150f8f1d54e594cc8f6a0",
                  id: this.sclist[i].id,
                  mac: "020000000000",
                  timestamp: "1609985172",
                  sessionid: "4853CDC28AAF4136ACFD9F98A86FD6E5",
                  timezone: "28800",
                  network: 1,
                  osversion: "14.0.1",
                  lat: "30.460359",
                  idfv: "01D797A6-80F3-4C9F-8183-9FB3F11DCC9E",
                  page: "200003",
                  producer: "apple",
                  screensize: "375*812",
                  idfa: "0E03CA4F-EC5F-4E29-9DAC-26D332D07B91",
                })
                .then((res) => {
                  if (res.result != null) {
                    this.$nextTick(() => {
                      this.alllist.push(res.result.dataList[0]);
                      console.log(this.alllist);
                    });
                  }
                });
            }
          }
        }
      });
  },
};
</script>



<style scoped lang="scss">
.sc {
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
  h2 {
    font-size: 16px;
    font-weight: 800;
    line-height: 20px;
  }
}

.bigbox {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .left {
    width: 90px;
    height: 85px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      border: 1px solid #999;
      border-radius: 6px;
    }
  }
}
.middle {
  margin-left: 3%;
  width: 60%;

  p {
    line-height: 46px;
    color: rgb(87, 87, 87);
  }
}
::v-deep .van-button--danger {
  padding: 0 8px;
}

.play {
  position: absolute;
  right: 0;
  bottom: 0;
}
</style>